<template>
  <div class="free">
    <div class="heads">
      <div class="fh" @click="$router.go(-1)">
        <span class="iconfont icon-arrow-left-bold"></span> 返回
      </div>
      <div class="center">免费专区</div>
       <router-link class="shuJ" tag="div" to="/bookshelf"><span class="iconfont icon-shujia"></span> 书架</router-link>
    </div>
    <div class="box" v-for="item in freeData" :key="item.name">
      <div class="title">{{item.name}}</div>
      <div
        class="item"
        v-for="(item, index) in item.list"
        :key="index + 'tj'"
        @click="goBook(item.id, item.title)"
      >
        <div class="img">
          <img :src="item.cover" alt="" width="100%" />
        </div>
        <div class="data">
          <div class="name">{{ item.title }}</div>
          <div class="p">
            {{ item.content }}
          </div>
          <div class="at-icon">
            <div class="at">{{ item.author }}</div>
            <div class="icon">
              <span class="icon1">{{ item.category }}</span>
              <span class="icon2">连载</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getFreeData} from "../api/free"
export default {
    data(){
        return{
            freeData:null
        }
    },
    methods:{
        goBook(id, name) {
      console.log(id, name);
      this.$router.push({
        path: "/bookDetails",
        query: { id: id, name: name },
      });
    },
    },
    created(){
        getFreeData().then(data=>{
            // console.log(data);
            this.freeData=data.data.list;
            this.freeData.splice(0,1);
        })
    }
};
</script>

<style lang="less">
.free {
  .heads {
    display: flex;
    justify-content: space-between;
    color: #fff;
    background-color: black;
    height: 50px;
    line-height: 50px;
    padding: 0 8px;
    .center {
      font-size: 20px;
      span {
        font-size: 14px;
      }
    }
  }
   .box {
    padding: 21px 19px;
    background-color: #fff;
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
      // margin-top: 21px;
      padding-left: 10px;
      border-left: 5px solid #e95e56;
      border-top-left-radius: 1px;
    }
    .item {
      display: flex;
      padding: 21px 0;
      border-bottom: 1px solid #f5f5f5;
      &:last-of-type {
        border: none;
        padding-bottom: 0px;
      }
      .img {
        width: 63px;
        height: 85px;
        padding: 1px;
        border: 1px solid #e3e2e1;
        background-color: pink;
        flex-shrink: 0;
        margin-right: 18px;
      }
      .data {
        .name {
          font-size: 16px;
          color: #333333;
          margin-bottom: 12px;
        }
        .p {
          font-size: 12px;
          color: #888888;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //多行在这里修改数字即可
          overflow: hidden;
          -webkit-box-orient: vertical;
        }
        .at-icon {
          font-size: 12px;
          color: #888888;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          .icon {
            span {
              width: 53px;
              height: 15px;
              border-radius: 1px;
              color: #fff;
              margin-left: 10px;
              padding: 3px;
            }
            .icon1 {
              background-color: #d1acd8;
            }
            .icon2 {
              background-color: #a1d0d2;
            }
          }
        }
      }
    }
  }
}
</style>